<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>卡布网</title>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css">
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}
			
			a {
				text-decoration: none;
			}
			
			.head {
				width: 100%;
				height: 160px;
			}
			
			#logo {
				padding-left: 45px;
				float: left;
				position: relative;
				z-index: 10;
			}
			
			.head_header {
				width: 1050px;
				height: 28px;
				border-bottom: 1px solid #EDEDED;
				margin-left: 190px;
				font-size: 12px;
				color: #999999;
				line-height: 25px;
				text-indent: 1em;
			}
			
			.head_header a:link {
				color: #999999;
			}
			
			.head_header a:hover {
				color: #F4604B;
			}
			
			.head_header a:visited {
				color: #999999;
			}
			
			.head_header_right a:link {
				color: #999999;
			}
			
			.head_header_right a:hover {
				color: #F4604B;
			}
			
			.head_header_right a:visited {
				color: #999999;
			}
			
			#my_kabu {
				font-size: 12px;
			}
			
			.head_header_right {
				width: 550px;
				height: 100px;
				float: right;
				position: relative;
				z-index: 200;
			}
			
			.sousuo {
				width: 360px;
				height: 70px;
				clear: both;
				float: left;
				margin-left: 450px;
				margin-top: -120px;
			}
			
			#sousuo {
				width: 350px;
				height: 35px;
				border: 2px solid #F4604B;
				border-radius: 35px;
				text-indent: 1em;
			}
			
			.sousuo a:link {
				color: #646464;
				font-size: 12px;
			}
			
			.sousuo a:visited {
				color: #646464;
				font-size: 12px;
			}
			
			.sousuo a:hover {
				color: #646464;
				font-size: 12px;
			}
			
			.xuanze {
				height: 27px;
				width: 300px;
				margin-left: 20px;
			}
			
			#web_jieshao {
				float: right;
				position: absolute;
				top: 45px;
				left: 830px;
			}
			
			.head_choose {
				width: 100%;
				/*min-width: 1200px;*/
				border-top: 1px solid #EDEDED;
				border-bottom: 1px solid #EDEDED;
				height: 35px;
				margin-top: 97px;
			}
			
			#slgv {
				height: 27px;
				width: 130px;
				color: black;
				font-size: 18px;
				font-weight: bolder;
				line-height: 30px;
			}
			
			#head_choose_div {
				color: black;
				font-size: 18px;
				font-weight: bolder;
				float: left;
				height: 26px;
				width: 110px;
				text-align: center;
				float: left;
				position: absolute;
				top: -30px;
			}
			
			.cnm {
				width: 80%;
				height: 28px;
				margin-left: 200px;
			}
			
			.cnm li {
				color: black;
				font-size: 14px;
				font-weight: bolder;
				list-style-type: none;
				float: left;
				height: 26px;
				width: 140px;
				margin-left: 30px;
				line-height: 33px;
				position: absolute;
			}
			
			.cnm li a:visited {
				color: #000000;
			}
			
			.cnm li a:link {
				color: #000000;
			}
			
			.cnm li a:hover {
				color: #F4604B;
			}
			
			#sy {
				left: 340px;
			}
			
			#baoyou {
				left: 420px;
			}
			
			#baoyou img {
				position: absolute;
				top: 0px;
				left: 125px;
			}
			
			#snvs {
				left: 590px;
			}
			
			#snans {
				left: 680px;
			}
			
			#srlw {
				left: 770px;
			}
			
			#bzxp {
				left: 880px;
			}
			
			#ygh {
				left: 990px;
			}
			
			.commodity_type {
				/*display: none;*/
				display: block;
				width: 900px;
				height: 528px;
				border: 1px solid #EDEDED;
				float: left;
				position: absolute;
				left: 196px;
				z-index: 20;
				background-color: white;
				box-sizing: border-box;
			}
			
			.commodity_type_bottom {
				clear: both;
				float: left;
				max-width: 90%;
				min-width: 1000px;
				height: 528px;
				border: 1px solid #EDEDED;
				background-color: white;
				margin-left: 10%;
			}
			
			.commodity_type_bottom p {
				font-size: 14px;
				color: black;
				font-weight: bolder;
				padding-left: 20px;
			}
			
			.commodity_type_bottom p a:visited {
				color: black;
			}
			
			.commodity_type_bottom p a:link {
				color: black;
			}
			
			.commodity_type_bottom p a:hover {
				color: #F4604B;
			}
			
			.commodity_type_left {
				width: 315px;
				height: 525px;
				border-right: 1px solid #EDEDED;
				float: left;
			}
			
			.commodity_type_left_tittle {
				color: black;
				font-size: 20px;
				font-family: "微软雅黑";
				font-weight: bolder;
				height: 50px;
				margin-top: 10px;
				padding-left: 20px;
				line-height: 50px;
			}
			
			span a:visited {
				color: #999999;
			}
			
			span a:link {
				color: #999999;
			}
			
			span a:hover {
				color: #F4604B;
			}
			
			#gonglv {
				width: 120px;
				text-align: center;
				margin-left: 0px;
				height: 40px;
			}
			
			.commodity_type p {
				font-size: 14px;
				color: black;
				font-weight: bolder;
				padding-left: 20px;
			}
			
			.commodity_type p a:visited {
				color: black;
			}
			
			.commodity_type p a:link {
				color: black;
			}
			
			.commodity_type p a:hover {
				color: #F4604B;
			}
			
			.commodity_type_left_geishei {
				height: 90px;
				padding-top: 10px;
			}
			
			.commodity_type_left_geishei span {
				color: #999999;
				font-size: 12px;
				height: 80px;
				padding-left: 20px;
				line-height: 20px;
				position: relative;
				top: 5px;
			}
			
			.commodity_type_left_shouliren {
				height: 90px;
				padding-top: 10px;
			}
			
			.commodity_type_left_shouliren span {
				color: #999999;
				font-size: 12px;
				padding-left: 20px;
				line-height: 20px;
				position: relative;
				top: 5px;
			}
			
			.commodity_type_left_jiage {
				height: 90px;
				padding-top: 10px;
			}
			
			.commodity_type_left_jiage span {
				color: #999999;
				font-size: 12px;
				padding-left: 25px;
				line-height: 20px;
				position: relative;
				top: 5px;
				margin: -5px;
			}
			
			.commodity_type_left_leixing {
				height: 90px;
				padding-top: 10px;
			}
			
			.commodity_type_left_leixing span {
				color: #999999;
				font-size: 12px;
				padding-left: 28px;
				line-height: 20px;
				position: relative;
				top: 5px;
				margin: -8px;
			}
			
			.commodity_type_right_tittle {
				width: 200px;
				height: 60px;
				color: black;
				font-size: 20px;
				font-family: "微软雅黑";
				font-weight: bolder;
				height: 50px;
				margin-top: 10px;
				line-height: 50px;
				float: left;
				margin-left: 20px;
			}
			
			.commodity_type_bottom .commodity_type_right_tittle {
				margin-left: 50px;
			}
			
			.commodity_type_right_left {
				width: 260px;
				height: 500px;
				float: left;
				margin-left: -220px;
			}
			
			.commodity_type_right_sssp {
				width: 260px;
				height: 90px;
				padding-top: 10px;
				margin-top: 55px;
			}
			
			.commodity_type_right_sssp span {
				color: #999999;
				font-size: 12px;
				padding-left: 28px;
				line-height: 20px;
				margin: -8px;
				position: relative;
				top: 8px;
			}
			
			.commodity_type_right_wjps {
				width: 260px;
				height: 90px;
				padding-top: 10px;
				margin-top: 5px;
			}
			
			.commodity_type_right_wjps span {
				color: #999999;
				font-size: 12px;
				padding-left: 28px;
				line-height: 20px;
				margin: -8px;
				position: relative;
				top: 8px;
			}
			
			.commodity_type_right_right {
				width: 260px;
				height: 500px;
				float: right;
				margin-left: 30px;
				margin-right: 30px;
				/*margin-top: -500px;*/
			}
			
			.commodity_type_right_hqkl {
				width: 260px;
				height: 90px;
				padding-top: 10px;
				margin-top: 55px;
			}
			
			.commodity_type_right_hqkl span {
				color: #999999;
				font-size: 12px;
				padding-left: 28px;
				line-height: 20px;
				margin: -8px;
				position: relative;
				top: 8px;
			}
			
			.commodity_type_right_jjrc {
				width: 260px;
				height: 100px;
				padding-top: 10px;
			}
			
			.commodity_type_right_jjrc span {
				color: #999999;
				font-size: 12px;
				padding-left: 28px;
				line-height: 20px;
				margin: -8px;
				position: relative;
				top: 8px;
			}
			
			.bg {
				position: relative;
				z-index: 1;
				background-image: url(img/bg.jpg);
				background-position-x: -310px;
				width: 100%;
				height: 365px;
			}
			
			.center_tettle {
				width: 1205px;
				height: 50px;
				background-color: #F5F5F5;
				margin: 0px auto;
				position: relative;
				top: 30px;
				z-index: 1;
			}
			
			.body {
				background-color: #F5F5F5;
				height: 400px;
			}
			
			.center_tettle li {
				list-style-type: none;
				float: left;
			}
			
			.c_t_div1 {
				line-height: 50px;
				text-align: center;
				font-weight: bolder;
				width: 160px;
				height: 48px;
				color: white;
				background-color: #E44715;
				position: relative;
				z-index: 1;
			}
			
			#c_t2 {
				transition: background-color 1s;
				background-color: #F5F5F5;
				height: 48px;
				padding-left: 20px;
				padding-right: 20px;
				line-height: 50px;
				margin-left: 3px;
				color: #666666;
			}
			
			#c_t2:hover {
				background-color: #E44715;
				color: white;
			}
			/*@media only screen and (min-width: 600px) {
				#commodity div {
					width: 282px;					
					margin: 40px;
				}
			}
			
			@media only screen and (min-width: 360px) and (max-width: 799px){
				#commodity div {
					width: 282px;		
				}
			}
			@media only screen and (max-width: 359px){
				#commodity div {
					width: 282px;
					
				}
			}*/
			
			.commodity {
				margin: 0px auto;
				margin-top: 40px;
				/*min-width: 1200px;*/
				max-width: 100%;
				overflow: hidden;
				background-color: #F5F5F5;
			}
			
			.juti_commodity {
				width: 282px;
				height: 372px;
				margin: 15px;
				float: left;
				border: 1px solid #999999;
			}
			
			.shunfeng_by {
				width: 58px;
				margin-left: 15px;
			}
			
			.zhanshi_tupian {
				float: left;
				width: 280px;
				margin-top: -44px;
			}
			
			.zhanshi_tupian img {
				width: 280px;
			}
			
			.xingqing_commodity {
				width: 280px;
				height: 90px;
				background-color: white;
				margin-top: -3px;
				float: left;
			}
			
			.jiage_xingqing {
				margin-top: 5px;
				margin-left: 15px;
				font-size: 12px;
				color: #666666;
			}
			
			.juti_commodity:hover {
				box-shadow: 2px 2px 3px #E8E8E8;
			}
			
			.jiage_xingqing span {
				font-size: 20px;
			}
			
			#h_price {
				font-size: 16px;
				color: red;
				font-weight: bolder;
				font-family: "微软雅黑";
			}
			
			.jiage_xingqing a {
				margin-left: 120px;
			}
			
			.jiage_xingqing a:visited {
				color: #999999;
				text-decoration: none;
			}
			
			.jiage_xingqing a:active {
				color: #999999;
				text-decoration: none;
			}
			
			.jiage_xingqing a:hover {
				color: #F4614D;
				text-decoration: underline;
			}
			
			.wujianmingcheng_xingqing {
				font-size: 12px;
				color: #999999;
				margin-top: 15px;
				margin-left: 15px;
				height: 3em;
				/*border: 1px solid;*/
			}
			
			.shoucang {
				float: left;
				width: 280px;
				height: 40px;
				margin-top: -40px;
				display: none;
			}
			
			.h_addshoucang {
				float: left;
				background-color: #6B6B6A;
				opacity: 0.7;
				width: 159px;
				height: 37px;
				color: white;
				font-size: 12px;
				text-align: center;
				line-height: 37px;
			}
			
			.h_addshoucang:hover {
				background-color: #F4614D;
			}
			
			.qukankan:hover {
				background-color: #F4614D;
			}
			
			.qukankan {
				margin-left: 1px;
				clear: both;
				float: right;
				background-color: #6B6B6A;
				opacity: 0.7;
				width: 120px;
				height: 37px;
				color: white;
				font-size: 12px;
				text-align: center;
				line-height: 37px;
			}
			
			.guding {
				position: fixed;
				top: 0px;
				left: 40px;
				width: 1205px;
				height: 50px;
				background-color: #F5F5F5;
				border: 1px solid #999999;
				margin: 0px auto;
				z-index: 200;
			}
			
			.guding li {
				list-style-type: none;
				float: left;
			}
			
			.commodity_bottom {
				clear: both;
				overflow: hidden;
				float: left;
				margin-top: 40px;
				min-width: 1240px;
				max-width: 100%;
				background-color: #F5F5F5;
			}
			
			.back_shouye {
				width: 130px;
				height: 48px;
				font-family: "微软雅黑";
				color: white;
				background-color: #E84847;
				border-radius: 5px;
				font-size: 18px;
				text-align: center;
				margin: 0px auto;
				line-height: 48px;
			}
			
			.hdzzjx {
				width: 255px;
				padding-top: 30px;
				font-family: "微软雅黑";
				font-size: 25px;
				color: #F4604B;
				margin: 0px auto;
			}
			
			.hdzzjx span {
				background-color: #F5F5F5;
				margin: 0px auto;
				margin-left: 15px;
				width: 210px;
				position: relative;
				top: 15px;
				padding-left: 10px;
				padding-right: 10px;
			}
			
			.zzjxdhd {
				margin-top: -20px;
				margin: 0px auto;
				border-top: 2px solid #E5E5E5;
				width: 97%;
				min-width: 1240px;
				height: 400px;
			}
			
			#huodong {
				margin: 0px auto;
				margin: 10px;
				margin-top: 30px;
				float: left;
			}
			
			.biaoqian {
				max-width: 97%;
				min-width: 1240px;
				overflow: hidden;
				clear: both;
				float: left;
				margin-left: 20px;
				padding-bottom: 50px;
			}
			
			.biaoqian_lie {
				width: 245px;
				height: 200px;
				float: left;
			}
			
			.yangshi1 {
				background-color: white;
				width: 235px;
				height: 56px;
				border: 1px solid #CCCCCC;
				color: green;
				font-size: 25px;
				font-family: "微软雅黑";
				font-weight: bold;
				line-height: 55px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi2 {
				background-color: white;
				width: 235px;
				height: 56px;
				border: 1px solid #CCCCCC;
				color: black;
				font-size: 25px;
				font-family: "微软雅黑";
				line-height: 55px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi3 {
				background-color: white;
				width: 235px;
				height: 56px;
				border: 1px solid #CCCCCC;
				color: #42D3FF;
				font-size: 25px;
				font-family: "微软雅黑";
				line-height: 55px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi4 {
				background-color: white;
				width: 235px;
				height: 56px;
				border: 1px solid #CCCCCC;
				color: #FF0066;
				font-size: 25px;
				font-weight: bold;
				font-family: "微软雅黑";
				line-height: 55px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi5 {
				background-color: white;
				width: 235px;
				height: 117px;
				border: 1px solid #CCCCCC;
				color: #FF9900;
				font-size: 30px;
				font-weight: bold;
				font-family: "微软雅黑";
				line-height: 118px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi6 {
				background-color: white;
				width: 235px;
				height: 117px;
				border: 1px solid #CCCCCC;
				color: #FF3399;
				font-size: 30px;
				font-weight: bold;
				font-family: "微软雅黑";
				line-height: 118px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi7 {
				background-color: white;
				width: 235px;
				height: 56px;
				border: 1px solid #CCCCCC;
				color: #009900;
				font-size: 25px;
				font-family: "微软雅黑";
				line-height: 55px;
				text-align: center;
				margin: 5px;
			}
			
			.yangshi8 {
				background-color: white;
				width: 235px;
				height: 56px;
				border: 1px solid #CCCCCC;
				color: #FF6F9A;
				font-size: 25px;
				font-family: "微软雅黑";
				font-weight: bold;
				line-height: 55px;
				text-align: center;
				margin: 5px;
			}
			
			.bottom {
				min-width: 1240px;
				max-width: 100%;
				overflow: hidden;
			}
			
			.bottom ul {
				list-style-type: none;
			}
			
			.baozhang ul {
				margin-left: 40px;
			}
			
			.baozhang li {
				float: left;
				margin: 24px;
			}
			
			.dibudanghang {
				max-width: 100%;
				min-width: 1200px;
			}
			
			.dibudanghang ul {
				clear: both;
				margin-left: 18%;
			}
			
			.dibudanghang li {
				float: left;
				margin: 20px;
				color: #606060;
				font-size: 12px;
			}
			
			.dibudanghang li a:active {
				color: #606060;
				text-decoration: none;
			}
			
			.dibudanghang li a:hover {
				color: #606060;
				text-decoration: underline;
			}
			
			.dibudanghang li a:visited {
				color: #606060;
				text-decoration: underline;
			}
			
			.bottom_border {
				overflow: hidden;
				background-color: #F5F5F5;
			}
			
			.youceguding {
				width: 50px;
				height: 300px;
				position: fixed;
				right: 5px;
				top: 55%;
				z-index: 300;
			}
			
			.youce_yangshi1 {
				margin-top: 6px;
				width: 45px;
				height: 45px;
				color: #606060;
				font-family: "微软雅黑";
				font-size: 14px;
				text-align: center;
				background-color: white;
				border: 1px solid #CCCCCC;
				padding-top: 3px;
			}
			
			.youce_yangshi1:hover {
				color: #E44715;
				text-decoration: none;
			}
			
			.youce_yangshi2 {
				margin-top: 6px;
				width: 45px;
				height: 45px;
				color: #606060;
				font-family: "微软雅黑";
				font-size: 35px;
				text-align: center;
				background-color: white;
				border: 1px solid #CCCCCC;
				padding-top: -5px;
			}
			
			#youce_yangshi3 {
				display: none;
				margin-top: 6px;
				width: 45px;
				height: 45px;
				color: #606060;
				font-family: "微软雅黑";
				font-size: 14px;
				text-align: center;
				background-color: white;
				border: 1px solid #CCCCCC;
				padding-top: 5px;
			}
			
			#youce_yangshi3 i {
				font-size: 30px;
			}
		</style>
		<script src="js/commodity.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			window.onload = function() {
				var l_shangpin = $("#commodity");
				var hzs_htmlstr_main = "";
				$(function() {
					for(var i = 0; i < left_shangpin.length; i++) {
						hzs_htmlstr_main += '<div class="juti_commodity" onmouseover="xianshishoucang(this)" onmouseleave="yincangshoucang(this)"><div class="shunfeng_by"><img src="img/shunfeng.png"></div><span class="zhanshi_tupian"><img src=' + left_shangpin[i].src + '></span><div class="shoucang"><ul style="list-style-type: none;"><li><a><div class="h_addshoucang" onclick="shoucang(this)"><i class="iconfont" id="my_kabu">&#xe680;</i>加入收藏</div></a></li><li style="float: left;"><a href="#"><div class="qukankan">去看看</div></a></li></ul></div><div class="xingqing_commodity"><p class="wujianmingcheng_xingqing">' + left_shangpin[i].jieshao + '</p><p class="jiage_xingqing"><span id="h_price">' + left_shangpin[i].jiage + '</span><a>' + left_shangpin[i].plNum + '</a></p></div></div>'

					}
					l_shangpin.append(hzs_htmlstr_main);
				});
				//动态返回顶部
				var btn = document.getElementById('youce_yangshi3');
				var timer = null;
				var isTop = true;
				//获取页面可视区高度
				var clientHeight = document.documentElement.clientHeight;

				//滚动条滚动时触发
				window.onscroll = function() {
					//显示回到顶部按钮
					var osTop = document.documentElement.scrollTop || document.body.scrollTop;
					if(osTop >= clientHeight) {
						btn.style.display = "block";
					} else {
						btn.style.display = "none";
					};
					//回到顶部过程中用户滚动滚动条，停止定时器
					if(!isTop) {
						clearInterval(timer);
					};
					isTop = false;
				};

				btn.onclick = function() {
					//设置定时器
					timer = setInterval(function() {
						//获取滚动条距离顶部高度
						var osTop = document.documentElement.scrollTop || document.body.scrollTop;
						var ispeed = Math.floor(-osTop / 7);

						document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
						//到达顶部，清除定时器
						if(osTop == 0) {
							clearInterval(timer);
						};
						isTop = true;

					}, 30);
				};

			}

			window.onscroll = function() {
				var ct = document.getElementById("center_tettle");
				var juli_top = document.getElementById("center_tettle").offsetTop;
				var sTop = document.body.scrollTop;
				//				var result = juli_top - sTop;

				if(sTop >= 555) {
					ct.className = "guding";
				} else if(sTop < 555) {
					ct.className = "center_tettle";
				}

			}
			$(function() {
				$("#gonglv").mouseover(function() {
					var t = $("#commodity_type");
					//slideToggle设置动画效果
					t.slideDown(400);
				});
				$("#commodity_type").mouseleave(function() {
					var t = $("#commodity_type");
					//slideToggle设置动画效果
					t.slideUp(200);
				});

			});

			function xianshishoucang(t) {
				var sc = t.getElementsByClassName("shoucang")[0];
				sc.style.display = "block";

			}

			function yincangshoucang(t) {
				var sc = t.getElementsByClassName("shoucang")[0];
				sc.style.display = "none";
			}

			function shoucang(t) {
				t.innerHTML = '已收藏，查看我的收藏！';
			}

		</script>
	</head>

	<body>
		<div class="head">
			<img src="img/logo.png" id="logo">
			<div class="head_header">
				Hi，欢迎来到卡布网&nbsp;&nbsp;
				<a href="#" title="登录">登录</a>&nbsp;&nbsp;
				<a href="#" title="注册">注册</a>

				<div class="head_header_right" style="border: 1px solid black;">
					<div style="border: 1px solid blue; float: left; padding-right: 10px;">
						<a href="#" title="我的卡布">我的卡布</a><i class="iconfont" id="my_kabu">&#xe6d5;</i></div>
					&nbsp;
					<div style="border: 1px solid blue; float: left; padding-right: 10px;"><i class="iconfont" id="my_kabu">&#xe670;</i>
						<a href="#" title="购物车">购物车</a>
					</div>
					&nbsp;

					<div style="border: 1px solid blue; float: left; padding-right: 10px;"><i class="iconfont" id="my_kabu">&#xe696;</i>
						<a href="#" title="手机版">手机版</a>
					</div>


					<div style="border: 1px solid blue; float: left; padding-right: 10px;">
						<a href="#" title="我的收藏">我的收藏</a><i class="iconfont" id="my_kabu">&#xe6d5;</i></div> &nbsp;

					<div style="border: 1px solid blue; float: left; padding-right: 10px;">
						<a href="#" title="在线客服">在线客服</a>
					</div>
					<div style="border: 1px solid blue;float: left; padding-right: 10px;">
						<a href="#" title="收藏卡布网">收藏卡布网</a>
					</div>

					<div class="wdkb" style="width: 85px; border: 1px solid black;  display: none; clear: both; float: left; background-color: white; position: relative; z-index: 100;">
						<ul style="list-style-type: none;">
							<li>我的订单</li>
							<li>我的优惠券</li>
						</ul>
					</div>
				</div>

			</div>
			<div class="sousuo">
				<input type="text" id="sousuo" placeholder="七夕情人节送女朋友什么？"><br/>
				<div class="xuanze">
					<a href="#">送女朋友</a>&nbsp;
					<a href="#">浪漫表白</a>&nbsp;
					<a href="#">我的订单查询</a>
				</div>

			</div>
			<img src="img/kdDes.png" id="web_jieshao">
			<div class="head_choose">
				<div class="cnm">
					<ul>
						<li id="gonglv">送礼攻略&nbsp;<i class="iconfont" id="my_kabu">&#xe6d5;</i></li>
						<li id="sy">
							<a href="#">首页</a>
						</li>
						<li id="baoyou">
							<a href="#">顺丰包邮 当天发货<img src="img/navHot.gif"></li>
						</a>
						<li id="snvs">
							<a href="#">送女生</li>
						</a>
						<li id="snans">
							<a href="#">送男生</li>
						</a>
						<li id="srlw">
							<a href="#">生日礼物</li>
						</a>
						<li id="bzxp">
							<a href="#">本周新品</li>
						</a>
						<li id="ygh">
							<a href="#">约个会！</li>
						</a>
					</ul>
				</div>
			</div>
		</div>
		<div class="commodity_type" id="commodity_type">
			<div class="commodity_type_left">
				<div class="commodity_type_left_tittle">按兴趣选礼物</div>
				<div class="commodity_type_left_geishei">
					<p>
						<a href="#">礼物送给谁</a>
					</p>
					<span><a href="#">送普通朋友</a></span>
					<span><a href="#">送心仪/暗恋对象</a></span>
					<span><a href="#">送女盆友/老婆</a></span>
					<span><a href="#">送男盆友/老公</a></span>
					<span><a href="#">送情侶</a></span>
				</div>
				<div class="commodity_type_left_shouliren">
					<p>
						<a href="#">收礼人个性</a>
					</p>
					<span><a href="#">女神</a></span>
					<span><a href="#">可爱/萌妹子</a></span>
					<span><a href="#">文艺女青年</a></span>
					<span><a href="#">吃货</a></span>
					<span><a href="#">学生党</a></span>
					<span><a href="#">星座控</a></span>
					<span><a href="#">白领</a></span>
				</div>
				<div class="commodity_type_left_jiage">
					<p>
						<a href="#">礼物价格</a>
					</p>
					<span><a href="#">100以下</a></span>
					<span><a href="#">100-200</a></span>
					<span><a href="#">200-500</a></span>
					<span><a href="#">500以上</a></span>
					<span><a href="#">包邮</a></span>
				</div>
				<div class="commodity_type_left_leixing">
					<p>
						<a href="#">礼物类型</a>
					</p>
					<span><a href="#">照片定制</a></span>
					<span><a href="#">名字定制</a></span>
					<span><a href="#">创意又有心意</a></span>
					<span><a href="#">一对一对的</a></span>
					<span><a href="#">实用</a></span>
					<span><a href="#">浪漫</a></span>
					<span><a href="#">礼物套装</a></span>
					<span><a href="#">星座</a></span>
				</div>
			</div>
			<div class="commodity_type_right">
				<div class="commodity_type_right_tittle">按类目选礼物</div>
				<div class="commodity_type_right_left">
					<div class="commodity_type_right_sssp">
						<p>
							<a href="#">时尚饰品</a>
						</p>
						<span><a href="#">项链</a></span>
						<span><a href="#">手链手镯</a></span>
						<span><a href="#">戒指</a></span>
						<span><a href="#">发饰/胸针</a></span>
						<span><a href="#">耳钉耳环</a></span>
						<span><a href="#">男士饰品</a></span>
						<span><a href="#">高档珠宝</a></span>
					</div>
					<div class="commodity_type_right_wjps">
						<p>
							<a href="#">围巾配饰</a>
						</p>
						<span><a href="#">围巾/手套</a></span>
						<span><a href="#">钱包/背包</a></span>
						<span><a href="#">手表</a></span>
						<span><a href="#">皮带</a></span>
						<span><a href="#">钥匙扣</a></span>
						<span><a href="#">zippo/军刀</a></span>
						<span><a href="#">梳子/化妆镜</a></span>
					</div>
					<div class="commodity_type_right_wjps">
						<p>
							<a href="#">创意摆件</a>
						</p>
						<span><a href="#">DIY模型/拼图</a></span>
						<span><a href="#">水晶摆件</a></span>
						<span><a href="#">装饰画/摆件</a></span>
						<span><a href="#">蜡烛/创意灯</a></span>
						<span><a href="#">音乐盒</a></span>
						<span><a href="#">印章</a></span>
						<span><a href="#">汽车饰品</a></span>
					</div>
					<div class="commodity_type_right_wjps">
						<p>
							<a href="#">布艺家纺</a>
						</p>
						<span><a href="#">毛绒公仔</a></span>
						<span><a href="#">抱枕靠垫</a></span>
						<span><a href="#">居家服/情趣</a></span>
					</div>
				</div>
				<div class="commodity_type_right_right">
					<div class="commodity_type_right_hqkl">
						<p>
							<a href="#">花/巧克力</a>
						</p>
						<span><a href="#">巧克力</a></span>
						<span><a href="#">永生花</a></span>
						<span><a href="#">金箔花</a></span>
						<span><a href="#">酒水饮料</a></span>
						<span><a href="#">卡通画/创意花束</a></span>
						<span><a href="#">蜡烛/气氛配件</a></span>
					</div>
					<div class="commodity_type_right_jjrc">
						<p>
							<a href="#">家具日常</a>
						</p>
						<span><a href="#">变色杯/保温杯</a></span>
						<span><a href="#">遮阳伞</a></span>
						<span><a href="#">创意灯</a></span></br>
						<span><a href="#">情趣礼品</a></span>
						<span><a href="#">生活电器</a></span>
						<span><a href="#">碗筷锅具</a></span>
						<span><a href="#">收纳</a></span>
						<span><a href="#">洗漱用品</a></span>
					</div>
					<div class="commodity_type_right_wjps">
						<p>
							<a href="#">数码办公</a>
						</p>
						<span><a href="#">记事本</a></span>
						<span><a href="#">钢笔</a></span>
						<span><a href="#">手机壳</a></span></br>
						<span><a href="#">鼠标垫</a></span>
						<span><a href="#">移动电源</a></span>
						<span><a href="#">U盘</a></span>
						<span><a href="#">名片夹</a></span>
					</div>
					<div class="commodity_type_right_wjps">
						<p>
							<a href="#">照片印刷</a>
						</p>
						<span><a href="#">照片冲印</a></span>
						<span><a href="#">年历挂历</a></span>
						<span><a href="#">报纸</a></span></br>
						<span><a href="#">纪念册/贺卡</a></span>
						<span><a href="#">扑克</a></span>
					</div>
					<div class="commodity_type_right_wjps">
						<p>
							<a href="#">服装内衣</a>
						</p>
						<span><a href="#">女士上装</a></span>
						<span><a href="#">情侣套装</a></span>
						<span><a href="#">亲子套装</a></span></br>
						<span><a href="#">居家内衣</a></span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="bg"></div>
		<div class="body">
			<div class="center_tettle" id="center_tettle">
				<ul>
					<li>
						<div class="c_t_div1">顺丰包邮&nbsp;生日礼物</div>
					</li>
					<a href="#">
						<li id="c_t2">
							<div class="c_t_div2">有创意又有心意礼物送女友</div>
						</li>
					</a>
					<a href="#">
						<li id="c_t2">
							<div class="c_t_div2">甜蜜巧克力</div>
						</li>
					</a>
					<a href="#">
						<li id="c_t2">
							<div class="c_t_div2">创意又有新意</div>
						</li>
					</a>
					<a href="#">
						<li id="c_t2">
							<div class="c_t_div2">一定要送花</div>
						</li>
					</a>
					<a href="#">
						<li id="c_t2">
							<div class="c_t_div2">卡布情侣印章定制</div>
						</li>
					</a>
				</ul>
			</div>
			<div class="commodity" id="commodity">
				<!--单个商品-->
				<!--<div class="juti_commodity" onmouseover="xianshishoucang(this)" onmouseleave="yincangshoucang(this)">
					<div class="shunfeng_by"><img src="img/icon_04.png"></div>
					<span class="zhanshi_tupian"><img src="img/5_5623ece1b87b2fae77ea329813bcc56c.jpg_mid.jpg"></span>
					<div class="shoucang">
						<ul style="list-style-type: none;">
							<li style="float: left;">
								<a>
									<div class="jiarushoucang" onclick="shoucang(this)"><i class="iconfont" id="my_kabu">&#xe680;</i>加入收藏</div>
								</a>
							</li>
							<li style="float: left;">
								<a href>
									<div class="qukankan">去看看</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="xingqing_commodity">
						<p class="jiage_xingqing">
							<span class="price"><span>¥</span>169.00</span>
							<a href="#">329条评价</a>
						</p>
						<p class="wujianmingcheng_xingqing">送女朋友老婆女生浪漫情人节生日创意礼物礼...</p>
					</div>
				</div>-->
				<!--单个商品-->
			</div>

			<!-- 底部分类栏-->
			<div class="bottom_border">
				<div class="commodity_type_bottom" id="commodity_type" style="display: block;">
					<div class="commodity_type_left">
						<div class="commodity_type_left_tittle">按兴趣选礼物</div>
						<div class="commodity_type_left_geishei">
							<p>
								<a href="#">礼物送给谁</a>
							</p>
							<span><a href="#">送普通朋友</a></span>
							<span><a href="#">送心仪/暗恋对象</a></span>
							<span><a href="#">送女盆友/老婆</a></span>
							<span><a href="#">送男盆友/老公</a></span>
							<span><a href="#">送情侶</a></span>
						</div>
						<div class="commodity_type_left_shouliren">
							<p>
								<a href="#">收礼人个性</a>
							</p>
							<span><a href="#">女神</a></span>
							<span><a href="#">可爱/萌妹子</a></span>
							<span><a href="#">文艺女青年</a></span>
							<span><a href="#">吃货</a></span>
							<span><a href="#">学生党</a></span>
							<span><a href="#">星座控</a></span>
							<span><a href="#">白领</a></span>
						</div>
						<div class="commodity_type_left_jiage">
							<p>
								<a href="#">礼物价格</a>
							</p>
							<span><a href="#">100以下</a></span>
							<span><a href="#">100-200</a></span>
							<span><a href="#">200-500</a></span>
							<span><a href="#">500以上</a></span>
							<span><a href="#">包邮</a></span>
						</div>
						<div class="commodity_type_left_leixing">
							<p>
								<a href="#">礼物类型</a>
							</p>
							<span><a href="#">照片定制</a></span>
							<span><a href="#">名字定制</a></span>
							<span><a href="#">创意又有心意</a></span>
							<span><a href="#">一对一对的</a></span>
							<span><a href="#">实用</a></span>
							<span><a href="#">浪漫</a></span>
							<span><a href="#">礼物套装</a></span>
							<span><a href="#">星座</a></span>
						</div>
					</div>
					<div class="commodity_type_right">
						<div class="commodity_type_right_tittle">按类目选礼物</div>
						<div class="commodity_type_right_left">
							<div class="commodity_type_right_sssp">
								<p>
									<a href="#">时尚饰品</a>
								</p>
								<span><a href="#">项链</a></span>
								<span><a href="#">手链手镯</a></span>
								<span><a href="#">戒指</a></span>
								<span><a href="#">发饰/胸针</a></span>
								<span><a href="#">耳钉耳环</a></span>
								<span><a href="#">男士饰品</a></span>
								<span><a href="#">高档珠宝</a></span>
							</div>
							<div class="commodity_type_right_wjps">
								<p>
									<a href="#">围巾配饰</a>
								</p>
								<span><a href="#">围巾/手套</a></span>
								<span><a href="#">钱包/背包</a></span>
								<span><a href="#">手表</a></span>
								<span><a href="#">皮带</a></span>
								<span><a href="#">钥匙扣</a></span>
								<span><a href="#">zippo/军刀</a></span>
								<span><a href="#">梳子/化妆镜</a></span>
							</div>
							<div class="commodity_type_right_wjps">
								<p>
									<a href="#">创意摆件</a>
								</p>
								<span><a href="#">DIY模型/拼图</a></span>
								<span><a href="#">水晶摆件</a></span>
								<span><a href="#">装饰画/摆件</a></span>
								<span><a href="#">蜡烛/创意灯</a></span>
								<span><a href="#">音乐盒</a></span>
								<span><a href="#">印章</a></span>
								<span><a href="#">汽车饰品</a></span>
							</div>
							<div class="commodity_type_right_wjps">
								<p>
									<a href="#">布艺家纺</a>
								</p>
								<span><a href="#">毛绒公仔</a></span>
								<span><a href="#">抱枕靠垫</a></span>
								<span><a href="#">居家服/情趣</a></span>
							</div>
						</div>
						<div class="commodity_type_right_right">
							<div class="commodity_type_right_hqkl">
								<p>
									<a href="#">花/巧克力</a>
								</p>
								<span><a href="#">巧克力</a></span>
								<span><a href="#">永生花</a></span>
								<span><a href="#">金箔花</a></span>
								<span><a href="#">酒水饮料</a></span>
								<span><a href="#">卡通画/创意花束</a></span>
								<span><a href="#">蜡烛/气氛配件</a></span>
							</div>
							<div class="commodity_type_right_jjrc">
								<p>
									<a href="#">家具日常</a>
								</p>
								<span><a href="#">变色杯/保温杯</a></span>
								<span><a href="#">遮阳伞</a></span>
								<span><a href="#">创意灯</a></span></br>
								<span><a href="#">情趣礼品</a></span>
								<span><a href="#">生活电器</a></span>
								<span><a href="#">碗筷锅具</a></span>
								<span><a href="#">收纳</a></span>
								<span><a href="#">洗漱用品</a></span>
							</div>
							<div class="commodity_type_right_wjps">
								<p>
									<a href="#">数码办公</a>
								</p>
								<span><a href="#">记事本</a></span>
								<span><a href="#">钢笔</a></span>
								<span><a href="#">手机壳</a></span></br>
								<span><a href="#">鼠标垫</a></span>
								<span><a href="#">移动电源</a></span>
								<span><a href="#">U盘</a></span>
								<span><a href="#">名片夹</a></span>
							</div>
							<div class="commodity_type_right_wjps">
								<p>
									<a href="#">照片印刷</a>
								</p>
								<span><a href="#">照片冲印</a></span>
								<span><a href="#">年历挂历</a></span>
								<span><a href="#">报纸</a></span></br>
								<span><a href="#">纪念册/贺卡</a></span>
								<span><a href="#">扑克</a></span>
							</div>
							<div class="commodity_type_right_wjps">
								<p>
									<a href="#">服装内衣</a>
								</p>
								<span><a href="#">女士上装</a></span>
								<span><a href="#">情侣套装</a></span>
								<span><a href="#">亲子套装</a></span></br>
								<span><a href="#">居家内衣</a></span>
							</div>
						</div>
					</div>
				</div>
				<!-- 底部分类栏-->

				<div class="commodity_bottom">
					<a href="#">
						<div class="back_shouye">回首页看看</div>
					</a>
					</hr>
					<div class="hdzzjx"><span>以下活动正在进行</span></div>
					<div class="zzjxdhd">
						<a href="#"><img src="img/b1.jpg" id="huodong"></a>
						<a href="#"><img src="img/b2.jpg" id="huodong"></a>
						<a href="#"><img src="img/b3.jpg" id="huodong"></a>
						<a href="#"><img src="img/b4.jpg" id="huodong"></a>
						<a href="#"><img src="img/b5.jpg" id="huodong"></a>
						<a href="#"><img src="img/b6.jpg" id="huodong"></a>
						<a href="#"><img src="img/b7.jpg" id="huodong"></a>
						<a href="#"><img src="img/b8.jpg" id="huodong"></a>
					</div>

					<div class="biaoqian">
						<div class="biaoqian_lie">
							<a href="#">
								<div class="yangshi1">包邮</div>
							</a>
							<a href="#">
								<div class="yangshi2">吃货最爱</div>
							</a>
							<a href="#">
								<div class="yangshi3">心形礼物</div>
							</a>
						</div>
						<div class="biaoqian_lie">
							<a href="#">
								<div class="yangshi4">爱情信物</div>
							</a>
							<a href="#">
								<div class="yangshi5">热门礼物</div>
							</a>
						</div>
						<div class="biaoqian_lie">
							<a href="#">
								<div class="yangshi2">货到付款</div>
							</a>
							<a href="#">
								<div class="yangshi2">好看的首饰</div>
							</a>
							<a href="#">
								<div class="yangshi2">贵的礼物</div>
							</a>
						</div>
						<div class="biaoqian_lie">
							<a href="#">
								<div class="yangshi6">创意&心意</div>
							</a>
							<a href="#">
								<div class="yangshi7">生日礼物</div>
							</a>
						</div>
						<div class="biaoqian_lie">
							<a href="#">
								<div class="yangshi2">第一次送礼物</div>
							</a>
							<a href="#">
								<div class="yangshi2">公仔抱枕</div>
							</a>
							<a href="#">
								<div class="yangshi8">围巾手套</div>
							</a>
						</div>
					</div>
				</div>
			</div>

			<div class="bottom">
				<div class="baozhang">
					<ul>
						<a href="#">
							<li><img src="img/zglx.png"></li>
						</a>
						<a href="#">
							<li><img src="img/zsdz.png"></li>
						</a>
						<a href="#">
							<li><img src="img/pzbz.png"></li>
						</a>
						<a href="#">
							<li><img src="img/thbz.png"></li>
						</a>
						<a href="#">
							<li><img src="img/24xs.png"></li>
						</a>
						<a href="#">
							<li><img src="img/jmbz.png"></li>
						</a>
						<a href="#">
							<li><img src="img/199wyh.png"></li>
						</a>
						<a href="#">
							<li><img src="img/1250cs.png"></li>
						</a>
					</ul>
				</div>
				<div class="dibudanghang">
					<ul>
						<li>
							<a href="#">首页</a>
						</li>
						<li>
							<a href="#">商品分类</a>
						</li>
						<li>
							<a href="#">商家登录</a>
						</li>
						<li>
							<a href="#">招聘英才</a>
						</li>
						<li>
							<a href="#">联系我们</a>
						</li>
						<li>
							<a href="#">关于我们</a>
						</li>
						<li>
							<a href="#">买家帮助</a>
						</li>
						<li>
							<a href="#">我的卡布</a>
						</li>
						<li>
							<a href="#">送礼导航</a>
						</li>
					</ul>
				</div>
				</br>
				<p style="font-size: 12px; color: #B3ACAC; text-align: center; float: left; width: 100%; margin-bottom: 40px;"><span style="text-align: center;">Copyright © 2006-2014 kadang.com 网上经营许可证号：浙B2-20140235</span></p>
			</div>
			<div class="youceguding">
				<a href="#">
					<div class="youce_yangshi1">送礼</br>问我</div>
				</a>
				<a href="#">
					<div class="youce_yangshi1">我的</br>收藏</div>
				</a>
				<a href="#">
					<div class="youce_yangshi1">我有</br>话说</div>
				</a>
				<a href="#">
					<div class="youce_yangshi2"><i class="iconfont">&#xe694;</i></div>
				</a>

				<div id="youce_yangshi3"><i class="iconfont" style="font-size: 30px;">&#xe684;</i></div>

			</div>
	</body>

</html>